<template>

	<view class="userinfo">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="uForm">
			<u-form-item label="用户名" prop="username" :labelWidth=lableWidth borderBottom ref="item1">
				<u--input v-model="userInfo.username" :disabledColor="gray" disabled></u--input>
			</u-form-item>
			<u-form-item label="姓名" prop="realname" :labelWidth=lableWidth borderBottom ref="item1">
				<u--input v-model="userInfo.realname" :disabledColor="gray" clearable disabled></u--input>
			</u-form-item>
			<!-- <u-form-item label="联系电话" prop="phone" :labelWidth=lableWidth borderBottom ref="item1">
				<u--input v-model="userInfo.phone" :disabledColor="gray" clearable disabled></u--input>
			</u-form-item> -->
			<u-form-item label="邮箱地址" prop="email" :labelWidth=lableWidth borderBottom ref="item1">
				<u--input v-model="userInfo.email" :disabledColor="gray" clearable disabled></u--input>
			</u-form-item>
		</u--form>
		<!-- <u-button type="primary" text="保存修改" customStyle="margin-top: 30px;display:none;" @click="submit"></u-button> -->
	</view>

</template>

<script>
	import {
		UserService
	} from '../../request/api-package.js'
	import AuthService from '../../request/auth.service.js'
	export default {
		name: 'userInfo',
		components: {},
		data() {
			return {
				lableWidth: '80px',
				gray: '#edeff2',
				userInfo: {
					username: '',
					realname: '',
					phone: '',
					email: '',
				},
				rules: {
					realname: {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					email: {
						type: 'email',
						required: true,
						message: '请输入正确的邮箱地址',
						trigger: ['blur', 'change']
					},
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							pattern: /^1[3456789]\d{9}$/,
							message: '请输入正确的手机号码',
							trigger: ['change', 'blur']
						},

					]

				},

			}
		},
		onShow() {
			this.getUserInfo()
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			getUserInfo() {
				let userinfo = AuthService.getUserinfo().info
				this.userInfo = userinfo
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					let params = {
						id: this.userInfo.id,
						realname: this.userInfo.realname,
						phone: this.userInfo.phone,
						email: this.userInfo.email,
					}
					UserService.saveUserInfo(params).then((res) => {
						// if (res.data.code === 200) {
						// 	// AuthService.setUserinfo(this.userInfo)
						// 	AuthService.userinfo.info.realname = this.userInfo.realname
						// }
						uni.$u.toast(res.data.message)

					}).catch((res) => {
						console.log(res)
					});
				}).catch(errors => {
					uni.$u.toast('请输入正确的个人信息')
				})
			}


		}
	}
</script>

<style lang="scss" scoped>
	.userinfo {
		padding: 20px;
	}
</style>